Start from scratch and teach you to design gorgeous high-end web pages

Brief introduction

This article gives a plan to design a gorgeous high-end web page design, emphasizing the importance of background and font, skilled use of Photoshop, you can easily create a unique style of your own beautiful page. For specific HTML code implementations see the second part of the tutorial.

Start from scratch and teach you to design a gorgeous high-end web page

In this tutorial, we use simple thin fonts, with beautiful background pictures, carefully arranged space layout, design a high-end web page.

When you're done with this tutorial, you go back to our sister site Nettuts and then do it so we can implement the design with simple HTML code. Come on, let's get started!

Hello, everyone! I started by reading the Photoshop tutorial a few years ago and then created the psdtuts. I hope this site can help and inspire others! In addition to psdtuts, I have done a lot of different sites in a big company called Envato and done great projects.

Front End Design

An elegant design may meet the needs of the designer's folder type site, but may be changed for a variety of reasons. It all depends on having a good layout, structured layout and a visually appealing background.

The real power of design is to show you how to keep the design simple and complete. At the end of the Photoshop section of the tutorial, I'll show you how to easily change backgrounds and fonts, and explain why this works well.

The structure is simple: Landscape menu, main title panel, and content area. Even though it is the design homepage, you can imagine that an internal page might also have a different theme panel and a new content area. For the sake of brevity, we will only explain the design of the homepage.

First step

Create a new document first. I created a document that is 1100px wide and 1100px high. This document can be used for 1024px-wide sites, and there is still room to decide what to do outside of the viewable area, so it fits well under the larger screen.

Now the first step is to create a beautiful abstract background. We use the two colors from #1b204c to #472373 to draw the background in a linear descending way.

Second Step

Now we need an eye-catching background that is abstract enough to not interfere with reading text. Luckily, in the Gomedia ' s Arsenal site there is a wonderful free watercolor picture, click on the Freebie (free gift) area, you can find two watercolor pictures; we want the green one.

Now this is very happy, you press Ctrl+i to reverse the picture, will be in the background of the black color of the pink purple, this is even more cool!

Third Step

Now copy the processed watercolor picture to the main canvas, press the Ctrl+t key, and adjust it to the appropriate size. Here we'll fade the right to black (so that we can edit our HTML code more easily later). Also, we don't want to be too long in the vertical direction, so it's best to erase some of the excess. Select a brush and use black to erase the bottom part.

Note that it is best to select a brush with some textures, so erasing the part does not seem obvious. If you scroll down the brush list, there is a Photoshop-like brush from the legend. This brush can also be used, of course you may have other more beautiful brushes, use more freely.

When you select, the black fills the right and bottom areas so that this layer is covered in the entire canvas.

Fourth Step classification:

• PS Getting Started tutorial