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.
Step 2: Set up Canvas
The next step is to create a wide layout 960 pixels. Create a new sized document 1200 x 1500.
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.
Choose Select =>Transform Selection. Shrink the selected part width to 960 pixels. That is the working area of the layout.
Add a guide line to this section.
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.
Add guide lines to the selected area.
Step 3: Create a Header
Follow these steps to create a header for the layout. Create an area of height 465 pixels.
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.
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.
Now color the selected area like the image below:
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.
Select an area at the top of the height 110 pixels.
Press Delete To delete the selected part. This time it will look like:
Shrink vertically by pressing key combination Ctrl + T.
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.
Create a new layer, use the tools Pencil Tool have color code # 01bfd2 to draw a highlight line.
Hide the edges using the gradient mask. Select the tool Gradient Tool, create gradients in tables Options Panel as shown below:
Apply the gradient above.
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.
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.
That area will be filled with a pattern.
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.
Once done, you may find that Blend is quite eye-catching.
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.
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.
Add effects Subtle for logo.
Step 6: Path
Add link links.
Create path button. Use the tool Rectangular Marquee Tool and fill with any color. Then fell Fill Opacity down 0.
Double click on the thumbnail of the layer thumbnail, select Gradient Overlay, and use the settings as shown below:
Step 7: Content Slider
Choose an area of size 580 x 295 pixels.
Fill the area with gray tone.
Add the image you want to use, paste it into the layer you just created above.
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.
Set brush color code to # 000000 and add the dots.
Apply Gaussian Blur to soften the edges.
Select the lower half of the shadow and delete that part.
Change the position of the ball right on the slider.
Shrink the ball vertically. Next center on slider. Select both layers and on the board Options Panel, click the button Align Horizontal Centers.
Duplicate the ball and rotate vertically, placing it on the bottom edge of the slider.
Create slider control buttons using tools Rectangular Marqee Tool and fill the color code # 000000.
Decrease the button Opacity down 50%.
Open AutoShapes on the board Option Panel and select the arrow icon as below. Add that icon to the button.
Next create a bar like the image below and fill with color # 000000.
Reduction Opacity down to 50%.
Here you can add a description for your project.
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.
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.
Leave the space between header and shadow as 1 pixel.
Step 10: Apply the gradient to the background
Create a light gray to white gradient using the settings shown below.
Create a new layer below the header and apply the gradient above.
Step 11: Add a rotating slider button
Create a spin control button.
Apply Inner Shadow on each button to see the active items on the slider.
Step 12: Create Content Divider
Select the tool Pencil Tool and draw a line. Choose light gray (color code #aaaaaa).
Use gradient mask to hide the edges.
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.
Add guide lines to the boxes. Then delete these boxes and the rest are equal columns.
Add some featured services. Drop icons from the icon set Function. Maintain distance between objects in sync.
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.
Apply Gradient Overlay and Stroke for the Read More button.
Duplicate this button.
Add more recent activity items. In the example below, draw 3 boxes to add 3 images and apply 3 strokes.
Paste the images into the boxes.
Create the shadow as in the steps above and place in the boxes.
Add some descriptions to the project.
Now is the step to create a professional web interface in Photoshop with social networking utilities like Twitter Feed. Drag the bird Twitter icon.
Create a Twitter notification.
Create a More Tweets button.
Apply the following styles:
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
Step 14: Create the Footer and complete the process
Create a footer area and fill that area with gray.
Apply Color Overlay.
Finally, add the footer catalog link and copyright information. And so you have completed the process of creating a web interface in Photoshop.
The final result after performing fully and accurately the steps to create a professional web interface using Photoshop above.
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.