Making website homepage with Photoshop (2): Production of homepage content

Photoshop production of website homepage (2): Production source of homepage content: xuexin.com Xue Xin
Because compared to the main body, the content part is not easy to shine, so its design requires clearer ideas than the main body, and It really tests the patience of the producer. Usually the main work on the content part is done in Dreamweaver, so what we design here in Photoshop is just a reference appearance.

1. Use the vector “Rectangle Tool” to draw a light green background fill on the right side of the page. The hexadecimal value of this green is “#eefded”, which is almost close to white. This is To highlight the dark green text in the foreground. The text content here is fictitious, its hexadecimal color value is “#054d00”, and the layout position is shown in Figure 1-2-1.

Picture 1-2-1
　2. Below the text is the place where online videos are played. We insert some pictures here as placeholders. Picture recommendations are found in Adobe Stock Photos CS3, which is a huge library of picture materials provided by Adobe. It is included in Adobe Bridge CS3. Low-quality picture samples are completely free. Because web pages require higher download speeds, low-quality photos are more suitable for web designers. It should be noted that this search function does not support Chinese yet, so here we search for “bridge” to download some photos about bridges, as shown in Figure 1-2-2.

Figure 1-2-2
3. We used multiple pictures of “bridge” and “garden” to synthesize this part of the image content. The stone bridge silhouette font used here is “Fangzheng Guli Simplified”. Since the synthesis method is very simple, it will not be repeated here. For details, see Figure 1-2-3.

Figure 1-2-3
4. Draw a dark gray rectangle below with the hexadecimal color value “#2a2a2a”. Enter the text “ShiQiao Garden” and the font is “Trajan Pro”. These are used as partitions and decorations in the middle, as shown in Figure 1-2-4.

Figure 1-2- 4
5. Draw another lighter gray rectangle under the partition, with the hexadecimal value “#7a7a7a”. Draw two more lighter gray rectangles side by side on top of this rectangle, with the hex value “#efefef”. The drawing of these rectangles is mainly used for layout. There are two reasons for frequent use of gray. One is because gray usually represents advanced design. In addition, the main body of the web page is too bright. Using gray can balance it to avoid “stealing the protagonist.” “Child’s play”, as shown in Figure 1-2-5.

Figure 1-2- 5

　6. Search for images of teapots and chess pieces in Adobe Stock Photos CS3, which are all processed in Photoshop to a size of 90 X 90 pixels. Right-click on the teapot layer, select “Blending Options”, set the “Stroke” parameters to the size of “6” pixels, and the position to “Inside”. The “Inside” stroke can ensure that all four corners are right angles. The hexadecimal color value is “#067f18”, as shown in Figure 1-2-6.

Picture 1-2-6

7. Right-click on the teapot layer and select “Copy Layer Style”, as shown in Figure 1-2-7. Next, select the chess piece layer, right-click and select “Paste Layer Style”. This will ensure that the layer styles of the two are exactly the same, and it is faster and more convenient.

Figure 1-2-7
8. Add the text “Shiqiao Teahouse” and “Shiqiao Chess Square”, the font is “Fangzheng Ancient Li Simplified”, and the color value is “#646464”. The introduction text is “Song Ti”, the size is “12 points”, and the anti-aliasing method is “None”. This setting can ensure very clear small fonts. Such clear small fonts are commonly used in web design, as shown in Figure 1-2- 8 shown.

Figure 1-2-8
9. The left side of the page is used to place the “Spry Tabbed Panel” , here I also made an appearance placeholder. The specific operation will be detailed in the following tutorial, as shown in Figure 1-2-9.
Figure 1-2-9
10. At the bottom of the page, we draw a A dark gray rectangle with a layer name of “Gray Strip” and a hexadecimal color value of “#2a2a2a”. Enter the copyright information, address, administrator and contact name on it. The contact person is my newborn. Daughter, I guess if you contact her, she will ignore you, haha, as shown in Figure 1-2-10.

Figure 1-2-10
11. When we draw an edge for this rectangle, we also right-click and select “Blending Options” “, set the size in the stroke to “3” pixels, the same position inside, the color to lighter gray, the hexadecimal color value to “#7a7a7a”, as shown in Figure 1-2-11.

Figure 1-2-11

　12. Because it is an internal stroke, after tracing the edge, you may find that the thicker stroke has taken up too much of the “grey space” that is not rich. Strip”. In order to increase some space and make this stroke more decorative, the stroke on the upper edge needs to be removed. However, we know that there is no direct way to set individual edges in Photoshop’s stroke settings, so we need to make a small detour.

Select the “Gray Strip” layer and execute the menu “Layer > Layer Style > Create Layer”. This will separate the style from the layer and become a separate ordinary layer, such as As shown in Figure 1-2-12.

Figure 1-2- 12
13. We can pay attention to the changes in the “gray strip” layer and its style in the layers panel. Now select the inner stroke layer of the “long gray strip”, and then use the selection tool to delete the stroke on the upper edge until it is clearly visible and make it large enough, as shown in Figure 1-2-13. At this point, many readers may think that it is not necessary to go to war over this difference. In fact, web design is actually a very trivial job. Only in the details can exquisite pages be presented. Successful page design will always be based on Made up of countless finely carved “small parts”. At this point, the pattern for our homepage has been completed.