Teach you how to use Photoshop to create a beautiful web page – web page template

Author:Anonymous Source:Wish you a successful website construction
In this tutorial, we use simple and thin fonts, coupled with beautiful background pictures, and carefully arranged Use the space layout of the cloth to design a high-end web page.

When you finish this tutorial, you can check out our sister site NETTUTS and follow along so we implement the design using concise HTML code. Come on, let’s get started!

Hello everyone! I created PSDTUTS after getting into design years ago by reading Photoshop tutorials. I hope this site helps and inspires others! In addition to PSDTUTS, I also worked on many different sites for a large company called Envato and completed great projects.

End Design First we start designing. (Click on the image below to see a larger image)

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

The real power of design is showing you how to keep your design simple and complete. At the end of the Photoshop portion of the tutorial, I’ll show you how to easily change the background and fonts, and explain why this design works.

The structure is simple: horizontal menu, main title panel and content area. Even though you are designing the home page, you can also imagine that the internal pages might have different theme panels and new content areas. For the sake of simplicity, we will only work on the homepage design.

The first step is to create a new document. The document I created is 1100px wide and 1100px high. This document can be used for a site with a width of 1024px, and there is still room to decide how to lay it out outside the viewable area, so that it will fit well on larger screens.

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

Step 2 Now we want an eye-catching background that is abstract enough not to interfere with reading the text. Luckily, GoMedia’s Arsenal site has a great collection of free watercolor images. Click on the “freebie” section and you’ll find two watercolor images; the one we want is the green one.

Now I’m very happy. If you press CTRL+I to invert the picture, it will show a beautiful pink and purple color on the black background, which is even cooler!

Step 3 Now copy the processed watercolor picture to the main canvas, press the CTRL+T keys to adjust it to the appropriate size. Here we want to fade the right side to black (so we can edit our HTML code more easily later). Also, we don’t want it to be too long vertically, so it’s best to erase some of the excess. Pick a brush and use black to erase the bottom part.

Note that it is best to choose a brush with some texture so that the erased part will not be obvious. If you scroll down the brush list, there is a brush that comes with Photoshop like the one in the illustration. This brush will work too, but of course you may have other, fancier brushes that are more comfortable to use.

After you select it, fill the right and bottom areas with black, so that this layer covers the entire canvas.

Step 4 Now reduce the transparency of the watercolor layer to about 70% and set the overlay mode to blending mode. In this way, some colors appear more beautiful.

Step 5: Now create a new layer on top of the watercolor layer, and then draw linearly from bottom to top from black to transparent, so that basically the entire canvas fades to black at the bottom.

Step Six Next, in two new layers, draw a set of white to transparent light gradients, gradually expanding. Set these to Overlay, and set the transparency of the outermost and smallest circles to 40% and 100% respectively.

Basically you should do highlight settings on the image to show more texture.

Step Seven NowThis is the final finished background. Dark, abstract, and quite unique in color. Of course, pink may not be your favorite in general. If this is the case, add another color layer on top of the top layer to make adjustments. I prefer pink and purple, so that’s what I did!

Step 8 Now we create a new layer and add an “icon”. I had no intention of making it, so I decided to just put some text on it and make my icon. Because half of this tutorial is in PSDTUTS and the other half is in NETTUTS, I will just write a few simple words “psd vs net”.

The fonts I use here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of this font is used on ‘vs’). To make the ‘vs’ stand out a bit, use the Baseline control in the Font panel (shown in the second image below).

Finally, add a light gradient overlay and a 1-pixel internal white light to the text.

Step 9

Now in this step open the ruler (press CTRL+R) and draw a set of guide lines. Draw four lines at 50px, 320px, 610px, and 900px respectively to divide the page into three columns. At least those are the numbers I’ve used. Looking at my screenshot, I realized that the third line was out of bounds. . . oh!

Anyway, I have put all the elements into the space. But if you want to do multiple pages, you may use grids in other ways. Just designing the homepage like this, I’m going to use these three columns once – in a little while.

Step 10 Come on, now we draw the first black box. Keeping the rulers and guides turned on, create a new layer and draw a square marquee from side to side. Fill it with black, set the transparency to 80%, right-click on the layer and select Blending Options. Click “Gesture”, then add a 1px white stroke outside and set it to overlap mode. This way the borders look cooler and the black box looks sharper.

Step 11 Now copy the layer where the box is located, press CTRL+T to adjust the size of the box, keep the width unchanged and shorten the height (as shown in the picture below). This is our browse box.

Set the transparency to 40% and the fill to 50%. In this way, the box looks lighter, adding some depth to the two boxes, making people feel that the priorities are clear and focused.

This contrasting method of two boxes can be used to express the visual differences between elements. When users browse this page, we want them to see the large chunk of information first, and then the navigation bar. The purpose of downplaying it is to tell the user that this part is not intended to be highlighted and can be viewed later.

Step 12 Come on, let’s add some text now. Here I’m still using the Egyptian Light font for the headline (which will be an image in the final HTML code) and the Arial font for the menu bar (which will be the HTML text link).

Here are some suggestions about fonts. Such a design depends largely on our use of a simple font. The beautiful and generous text looks very grand, and it is a thin font, so it looks very elegant.

If you are looking for a high-end design look, slim and classic fonts are a must. When I first saw Helvetica, I remember going crazy and applying it to all my designs, and the designs looked really simple and high-end.

In addition, the special font Egyptian has a very straight line and a square feel, which looks cool (in my opinion).

There are many other great fonts available. But generally speaking, some more classic fonts should be used. In other words, unless you know exactly what you need, it’s best not to use fonts that look weird—say, futuristic-looking fonts. In fact, a good general rule of thumb is to stick with more generic fonts unless you feel confident.

Another font that works really well here is the bit technology – it looks like the font used by Chris Garrett Media. I don’t know what font this is, or what this type of font is called, but it’s very simple. Also�An enthusiastic typographer told us in the comments.

Step 13 Anyway, after looking at Chris Garrett Media’s site, I decided to add a gradient overlay to the font and add some shine to make it look cooler. You can see below that here we’re adding a gradient overlay from black to white, fading it a bit in overlay mode.

Step 14 Now we draw another big black box as the content area. You can actually copy the previous coat and then make some adjustments.

In this way we will achieve what is shown in the figure below. Looks pretty cool!!

Step 15 Now we add some fake content in the content box. Here I still use the Arial font for most of the text, but instead of Egyptian for the titles, I use the Georgia font. Georgia is not as elegant, but it is also a standard font that can be used as a title in the previous HTML code without using images or Flash.

In fact, with the release of Windows Vista, a semi-standard font called Cambria was produced. However, Cambria has some strange rendering problems in certain sizes in Firefox on Apple, so we still use the stable Georgia font for now.

Step 16 Finally I create a new layer at the bottom, fill it with dark purple, add a 1px border at the top, and voila, we have a footer.

Prepare to build the website Put the above together and prepare to build the website.

Optional Background 1 One of the cool things about this design is that it is easy to change the background image, and it will still look cool after changing it. Here I used a picture called “Passion” from the iStockPhoto site as the background, with a similar color strategy. This is a cool 3D light rendering. Like the background we are using now, it is also abstract and looks very dazzling.

Optional background/color 2 Here I used an abstract picture called “Blue Energy” from the iStockPhoto site as the background. Because the color has changed, I went through it and changed the color in some places – especially the text – and then added a highlight to the main layer.

Why it works

Now you probably won’t even think about this detailed design – now that I’ve written the full tutorial. Now let’s talk about why this works so that it can help you use these principles to create your own page.

Here are a few principles for this design:

First, I picked a few cool background pictures. You can use a few iStock pictures and a GoMedia picture to create a nice looking picture. Although it looks good, it doesn’t overwhelm the show. They also fade out easily. Generally, images that fade easily are easier to process.

Good pictures must be paired with concise font layout. Since the image is already cute, there’s no need to put too much emphasis on the font. It must be crisp, clear and organized.

Another factor in the work is sufficient space. Against a complex background, it’s easy to see things messed up, so keep enough space between elements, within boxes, etc. Having ample space is also a great way to make your design look more upscale. No one likes cluttered and inferior design. Of course, there are many other things that can be discussed, such as color, priority, etc., but I think the main design element that needs to be paid attention to here is the matching of fonts and backgrounds. To summarize, a small picture here explains everything:-)

Author:Anonymous Source:Wish you a successful website construction
In this tutorial, we use simple and thin fonts, coupled with beautiful background pictures, and carefully arranged ��The space layout, design a high-end web page.

When you finish this tutorial, you can check out our sister site NETTUTS and follow along so we implement the design using concise HTML code. Come on, let’s get started!

Hello everyone! I created PSDTUTS after getting into design years ago by reading Photoshop tutorials. I hope this site helps and inspires others! In addition to PSDTUTS, I also worked on many different sites for a large company called Envato and completed great projects.

End Design First we start designing. (Click on the image below to see a larger image)

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

The real power of design is showing you how to keep your design simple and complete. At the end of the Photoshop portion of the tutorial, I’ll show you how to easily change the background and fonts, and explain why this design works.

The structure is simple: horizontal menu, main title panel and content area. Even though you are designing the home page, you can also imagine that the internal pages might have different theme panels and new content areas. For the sake of simplicity, we will only work on the homepage design.

The first step is to create a new document. The document I created is 1100px wide and 1100px high. This document can be used for a site with a width of 1024px, and there is still room to decide how to lay it out outside the viewable area, so that it will fit well on larger screens.

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

Step 2 Now we want an eye-catching background that is abstract enough not to interfere with reading the text. Luckily, GoMedia’s Arsenal site has a great collection of free watercolor images. Click on the “freebie” section and you’ll find two watercolor images; the one we want is the green one.

Now I’m very happy. If you press CTRL+I to invert the picture, it will show a beautiful pink and purple color on the black background, which is even cooler!

Step 3 Now copy the processed watercolor picture to the main canvas, press the CTRL+T keys to adjust it to the appropriate size. Here we want to fade the right side to black (so we can edit our HTML code more easily later). Also, we don’t want it to be too long vertically, so it’s best to erase some of the excess. Pick a brush and use black to erase the bottom part.

Note that it is best to choose a brush with some texture so that the erased part will not be obvious. If you scroll down the brush list, there is a brush that comes with Photoshop like the one in the illustration. This brush will work too, but of course you may have other, fancier brushes that are more comfortable to use.

After you select it, fill the right and bottom areas with black, so that this layer covers the entire canvas.

Step 4 Now reduce the transparency of the watercolor layer to about 70% and set the Overlay mode to Blending mode. In this way, some colors appear more beautiful.

Step 5: Now create a new layer on top of the watercolor layer, and then draw linearly from bottom to top from black to transparent, so that basically the entire canvas fades to black at the bottom.

Step Six Next, in two new layers, draw a set of white to transparent light gradients, gradually expanding. Set these to Overlay, and set the transparency of the outermost and smallest circles to 40% and 100% respectively.

Basically you should do highlight settings on the image to show more texture.

Step 7 Now is the final background. Dark, abstract, and quite unique in color. Of course, pink may not be your favorite in general. If this is the case, add another color layer on top of the top layer to make adjustments. I prefer pink and purple, ��That’s it!

Step 8 Now we create a new layer and add an “icon”. I had no intention of making it, so I decided to just put some text on it and make my icon. Because half of this tutorial is in PSDTUTS and the other half is in NETTUTS, I will just write a few simple words “psd vs net”.

The fonts I use here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of this font is used on ‘vs’). To make the ‘vs’ stand out a bit, use the Baseline control in the Font panel (shown in the second image below).

Finally, add a light gradient overlay and a 1-pixel internal white light to the text.

Step 9

Now in this step open the ruler (press CTRL+R) and draw a set of guide lines. Draw four lines at 50px, 320px, 610px, and 900px respectively to divide the page into three columns. At least those are the numbers I’ve used. Looking at my screenshot, I realized that the third line was out of bounds. . . oh!

Anyway, I have put all the elements into the space. But if you want to do multiple pages, you may use grids in other ways. Just designing the homepage like this, I’m going to use these three columns once – in a little while.

Step 10 Come on, now we draw the first black box. Keeping the rulers and guides turned on, create a new layer and draw a square marquee from side to side. Fill it with black, set the transparency to 80%, right-click on the layer and select Blending Options. Click “Gesture”, then add a 1px white stroke outside and set it to overlap mode. This way the borders look cooler and the black box looks sharper.

Step 11 Now copy the layer where the box is located and press CTRL+T to adjust the size of the box, keeping the width unchanged and the height shortened (as shown in the picture below). This is our browse box.

Set the transparency to 40% and the fill to 50%. In this way, the box looks lighter, adding some depth to the two boxes, making people feel that the priorities are clear and focused.

This contrasting method of two boxes can be used to express the visual differences between elements. When users browse this page, we want them to see the large chunk of information first, and then the navigation bar. The purpose of downplaying it is to tell the user that this part is not intended to be highlighted and can be viewed later.

Step 12 Come on, let’s add some text now. Here I’m still using the Egyptian Light font for the headline (which will be an image in the final HTML code) and the Arial font for the menu bar (which will be the HTML text link).

Here are some suggestions about fonts. Such a design depends largely on our use of a simple font. The beautiful and generous text looks very grand, and it is a thin font, so it looks very elegant.

If you are looking for a high-end design look, slim and classic fonts are a must. When I first saw Helvetica, I remember going crazy and applying it to all my designs, and the designs looked really simple and high-end.

In addition, the special font Egyptian has a very straight line and a square feel, which looks cool (in my opinion).

There are many other great fonts available. But generally speaking, some more classic fonts should be used. In other words, unless you know exactly what you need, it’s best not to use fonts that look weird—say, futuristic-looking fonts. In fact, a good general rule of thumb is to stick with more generic fonts unless you feel confident.

Another font that works really well here is the bit technology – it looks like the font used by Chris Garrett Media. I don’t know what font this is, or what this type of font is called, but it’s very simple. Maybe an enthusiastic typographer told us in the comments.

Step 13 Anyway, after looking at Chris Garrett Media’s site, I decided to add .Add a gradient overlay and add some highlights to make it look cooler. You can see below that here we’re adding a gradient overlay from black to white, fading it a bit in overlay mode.

Step 14 Now we draw another big black box as the content area. You can actually copy the previous coat and then make some adjustments.

In this way we will achieve what is shown in the figure below. Looks pretty cool!!

Step 15 Now we add some fake content in the content box. Here I still use the Arial font for most of the text, but instead of Egyptian for the titles, I use the Georgia font. Georgia is not as elegant, but it is also a standard font that can be used as a title in the previous HTML code without using images or Flash.

In fact, with the release of Windows Vista, a semi-standard font called Cambria was produced. However, Cambria has some strange rendering problems in certain sizes in Firefox on Apple, so we still use the stable Georgia font for now.

Step 16 Finally I create a new layer at the bottom, fill it with dark purple, add a 1px border at the top, and voila, we have a footer.

Prepare to build the website Put the above together and prepare to build the website.

Optional Background 1 One of the cool things about this design is that it is easy to change the background image, and it will still look cool after changing it. Here I used a picture called “Passion” from the iStockPhoto site as the background, with a similar color strategy. This is a cool 3D light rendering. Like the background we are using now, it is also abstract and looks very dazzling.

Optional background/color 2 Here I used an abstract picture called “Blue Energy” from the iStockPhoto site as the background. Because the color has changed, I went through it and changed the color in some places – especially the text – and then added a highlight to the main layer.

Why it works

Now you probably won’t even think about this detailed design – now that I’ve written the full tutorial. Now let’s talk about why this works so that it can help you use these principles to create your own page.

Here are a few principles for this design:

First, I picked a few cool background pictures. You can use a few iStock pictures and a GoMedia picture to create a nice looking picture. Although it looks good, it doesn’t overwhelm the show. They also fade out easily. Generally, images that fade easily are easier to process.

Good pictures must be paired with concise font layout. Since the image is already cute, there’s no need to put too much emphasis on the font. It must be crisp, clear and organized.

Another factor in the work is sufficient space. Against a complex background, it’s easy to see things messed up, so keep enough space between elements, within boxes, etc. Having ample space is also a great way to make your design look more upscale. No one likes cluttered and inferior design. Of course, there are many other things that can be discussed, such as color, priority, etc., but I think the main design element that needs to be paid attention to here is the matching of fonts and backgrounds. To summarize, a small picture here explains everything:-)

<!–Collectio